<template>
  <div class="tips" v-if="isShowTips">
    <div class="tips-content">
      <img src="./../../assets/images/tips-background.png" alt="">
      <span class="close-tips" @click="closeTips">
        <i class="close-left"></i>
        <i class="close-right"></i>
      </span>
      <div class="tips-title" v-if="isEdit">编辑标题</div>
      <div class="tips-title" v-else>提示</div>
      <div class="content edit-content" v-if="isEdit">
        <div class="content-input">
          <input type="text" v-model.trim="showMessage">
          <p class="input-tips" v-if="emptyInput">输入不能为空</p>
        </div>
        <span class="sure-btn" @click="sureHandle">确认</span>
      </div>
      <div class="content" v-else>
        <p class="content-message">{{ showMessage }}</p>
        <span class="sure-btn" @click="sureHandle">{{ sureButtonMessage }}</span>
      </div>
    </div>
    <div class="matter"></div>
  </div>
</template>
<script>
export default {
  name: 'tips',
  data () {
    return {
      isEdit: false, // 是否是编辑标题
      isShowTips: false, // 是否显示提示弹窗
      showMessage: '', // 提示语或者公司名字
      sureButtonMessage: '确认', // 确认按钮的文字
      showType: 0, // 提示类型， 默认是0，可根据showTips方法传进来的修改传传的值
      emptyInput: false, // 判断编辑标题是否为空
      sureCallback: null // 返回的回调函数
    }
  },
  methods: {
    // 确定处理
    sureHandle () {
      if (this.isEdit && this.showMessage === '') {
        this.emptyInput = true
        return false
      } else {
        this.emptyInput = false
      }
      if (this.sureCallback) {
        this.sureCallback({ type: this.showType, message: this.showMessage })
      } else {
        this.$emit('sureHandle', { type: this.showType, message: this.showMessage })
      }
      this.closeTips()
    },
    // 关闭处理
    closeTips () {
      this.isEdit = false
      this.isShowTips = false
      this.showMessage = ''
      this.sureButtonMessage = '确认'
      this.showType = 0
      this.sureCallback = null
    },
    // showMessage.isEdit是否是编辑标题
    // showMessage.showType提示的类型，默认是0，可根据showTips方法传进来的修改传传的值目前 1是修改标题， 2是保存标题，
    // showMessage.sureButtonMessage 确认按钮文字
    // showMessage.sureCallback 当存在这个参数并且是函数的时候， this.$emit('sureHandle', this.showType, this.showMessage)失效
    // showMessage.showMessage 提示内容
    showTips (showMessage) {
      if (typeof showMessage === 'string') {
        if (!this.isShowTips) {
          this.isEdit = false
          this.showType = 0
          this.isShowTips = true
          this.sureButtonMessage = '确认'
          this.showMessage = showMessage
        }
      } else {
        if (!this.isShowTips) {
          this.isEdit = showMessage.isEdit
          if (showMessage.showType === undefined) {
            showMessage.showType = 0
          }
          this.showType = showMessage.showType
          if (showMessage.sureButtonMessage) {
            this.sureButtonMessage = showMessage.sureButtonMessage
          } else {
            this.sureButtonMessage = '确认'
          }
          if (showMessage.sureCallback && typeof showMessage.sureCallback === 'function') {
            this.sureCallback = showMessage.sureCallback
          }
          this.isShowTips = true
          this.showMessage = showMessage.showMessage
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tips{
    .tips-content{
      width: 30%;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 500;
      transform: translate(-50%, -50%);
      img{
        width: 100%;
      }
      .close-tips{
        position: absolute;
        right: 4.1%;
        top: 12.85%;
        width: 16px;
        height: 16px;
        z-index: 20;
        cursor: pointer;
        i{
          width: 16px;
          height: 2px;
          display: block;
          background: #3d76fb;
        }
        .close-left{
          transform-origin: 50% 50%;
          transform: rotateZ(135deg) translate(4px, -5px);
        }
        .close-right{
          transform: rotateZ(45deg) translate(4px, 3px);
        }
      }
      .tips-title{
        width: 100%;
        height: 30.9%;
        color: #6f9dd6;
        font-size: 18px;
        position: absolute;
        left: 0;
        top: 5.2%;
        padding: 0 0 0 7%;
        display: flex;
        align-items: center;
      }
      .content{
        position: absolute;
        top: 35%;
        left: 7.32%;
        width: calc(100% - 7.32% - 6.12%);
        height: calc(100% - 45.33%);
        padding: 0 0 0 0;
        box-sizing: border-box;
        overflow: hidden;
        .content-message{
          width: 100%;
          color: #6f9dd6;
          font-size: 14px;
          max-height: 22px;
          line-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .sure-btn{
          float: right;
          width: 21.5%;
          height: 43.6%;
          font-size: 14px;
          position: absolute;
          right: 0;
          bottom: 22.87%;
          display: flex;
          color: #6f9dd6;
          justify-content: center;
          align-items: center;
          text-align: center;
          background: url("./../../assets/images/setting/setting-button.png") no-repeat center;
          background-size: 100% 100%;
        }
        &.edit-content{
          .content-input{
            float: left;
            width: 75.52%;
            height: 32.4%;
            position: relative;
            top: 39%;
            transform: translateY(-50%);
            background: #133178;
            color: #6f9dd6;
            border: 1px solid #3e77fa;
            display: flex;
            justify-content: center;
            align-items: center;
            .input-tips{
              position: absolute;
              bottom: -25%;
              left: 0;
              transform: translateY(100%);
              font-size: 12px;
              color: #f00;
            }
            input{
              width: 100%;
              height: 26px;
              font-size: 14px;
              line-height: 26px;
              box-sizing: border-box;
              padding: 0 10px;
              color: #6f9dd6;
              background: none;
              outline: none;
              border: none;
            }
          }
          .sure-btn{
            position: absolute;
            top: 39%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .matter{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 30;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
  }
</style>
